<!-- 配料补录 -->
<template>
  <view class="container">
    <!-- 顶部标题 -->
    <TopBar title="配料补录"></TopBar>

    <!-- 显示内容区域 -->
    <!-- 输入内容区域 -->
    <view class="top-input">
      <!-- 第一行 -->
      <view class="top-input-date">
        <view class="top-input-date-title">配料单号</view>
        <view top-input-date-inputbox>
          <input class="top-input-date-input" placeholder="" @confirm="showDetail" />
        </view>
      </view>
      <view class="top-input-date">
        <view class="top-input-date-title">日期</view>
        <view top-input-date-inputbox>
          <input class="top-input-date-input" placeholder="" />
        </view>
      </view>

      <view class="top-input-date  ">
        <view class="top-input-date-btn">
          <view>
            <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox" :checked="true" />
            只显示未完成料单
          </view>
          <view>共3条数据</view>
        </view>

        <view class="top-input-date-btn">
          <view class="top-input-date-btnuu">
            <view class="top-input-date-btn-buttom">隐藏</view>
            <view class="top-input-date-btn-buttom">查询</view>
          </view>

        </view>
      </view>

    </view>
    <!-- 显示列表区域 -->
    <view class="top-list">
      <!-- 删除以下三个按钮的HTML代码 -->
      <!-- 三个按钮 -->





      <!-- 显示列表区域 -->
      <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 500px;">

        <!-- 配料核对-明细-工艺 -->
        <view class=" top-list-title-gongyi">
          <view class="top-list-title-item-gongyi-title">
            <view class="top-list-title-item-title">
            <text style="color: blue;"> 33124324212</text>
            </view>
            <view class="top-list-title-item-title">
              <button style="width: 50%;height: 100%;">作业</button>
            </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: green;">
              编码：
            </view>
            <view class="top-list-title-item-title-gongyi-right">122542312221</view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: red;">
              名称：
            </view>
            <view class="top-list-title-item-title-gongyi-right">纪念章飞往 </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: yellow;">
              批次
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 34123 </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: blue;">
              数量：
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 144 </view>

            <view class="top-list-title-item-title-gongyi-left" style="color: blue;">
              数量：
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 144 </view>
          </view>

        </view>

      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import TopBar from "@/components/TopBar.vue"
import { ref } from 'vue';
const materialList = ref([
  {
    id: 1,                      // 唯一标识，就像商品的条形码
    materialCode: 'MAT001',     // 物料编码：系统内物料唯一编号
    materialName: '乳化剂A-102', // 物料名称：生产中实际使用的名称
    batchNo: 'B2023101501',     // 批次号：同一批生产的物料标识
    requiredQty: 50.5,          // 需求数量：工单要求的使用量
    unit: 'kg',                 // 单位：计量方式
    scannedQty: 50.5,           // 已扫描数量：实际已核对的数量
    status: 'completed'         // 状态：completed-已完成，pending-待核对
  },
  {
    id: 2,
    materialCode: 'MAT002',
    materialName: '稳定剂B-301',
    batchNo: 'B2023101602',
    requiredQty: 20.0,
    unit: 'kg',
    scannedQty: 15.5,
    status: 'pending'
  },
  {
    id: 3,
    materialCode: 'MAT003',
    materialName: '香精C-004',
    batchNo: 'B2023101701',
    requiredQty: 5.2,
    unit: 'L',
    scannedQty: 5.2,
    status: 'completed'
  },
  {
    id: 4,
    materialCode: 'MAT004',
    materialName: '色素D-205',
    batchNo: 'B2023101803',
    requiredQty: 1.5,
    unit: 'kg',
    scannedQty: 0,
    status: 'pending'
  }
]);

//配料单号回车触发
const showDetail = () => {
  uni.navigateTo({
    url: '/pages/WorkShop/MaterialReplenish/MaterialReplenishDetails'
  });
}
</script>
<style scoped>
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /* justify-content: center; */
  min-height: 500px;
  overflow: hidden;
  /* 3. 隐藏容器溢出内容 */
  background-color: #F7F3F1;
  /* background-image: url("/src/static/log/Loginbg3.png"); */
  background-size: 100% 100%;
}

.top-input {
  width: 87%;
  height: auto;
  padding: 10px 30px;
  border-radius: 10px;
  background-color: aqua;
}

/* // 设置日期输入区域为弹性布局 */
.top-input-date {
  display: flex;
  /* // 设置子元素水平排列 */
  flex-direction: row;
  flex: 1;

  /* // 设置子元素在交叉轴上居中对齐 */
  align-items: center;

  margin: 10px 0px;
}

.top-input-date-btn {
  width: 100%;
}

.top-input-date-btnuu {
  width: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.top-input-date-title {
  width: 100px;
  /* 固定标题宽度，就像书架的隔板宽度统一 */
  text-align: left;
  /* 文字右对齐，视觉上更整齐 */
  padding-right: 10px;
  /* 标题和输入框之间留间隙 */
}

.top-input-date-input {
  height: 40px;
  border: 1px solid #000;
  border-radius: 20px;
  padding-left: 20px;
  margin-right: 0px;

}

.button-container {
  display: flex;
  /* 启用Flex布局，类似设置书架为可调节模式 */
  /* 两端对齐，第一个放左边，最后一个放右边 */
}





/* 显示列表区域 最外*/
.top-list {
  width: 100%;

  margin-top: 20px;

}

/* //三个按钮 */
.top-list-btn {
  display: flex;
  flex-direction: row;
}

.top-input-date-btn-buttom {
  width: 70px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
}







/* 列表 */
.top-list-title-gongyi {
  padding: 10px 40px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;

}

.top-list-title-item-gongyi {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #8f8a8a;
  padding: 5px 0px;

}

.top-list-title-item-gongyi-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #8f8a8a;
  padding-bottom: 1x;

}

.top-list-title-item-title {
  width: 100%;
}

.top-list-title-item-title-gongyi-left {
  width: 20px;
  /* 1. 设置固定宽度（根据最长标题调整） */
  padding-right: 30px;
  /* 2. 标题和内容之间保留间距 */
  white-space: nowrap;
  /* 3. 禁止标题文本换行 */
}

.top-list-title-item-title-gongyi-right {
  width: auto;
}
</style>